<script src="../asynx.js"></script>
<script src="../dom/dom.js"></script>
<script src="../impl/array.js"></script>
<script src="../impl/util.js"></script>
<script src="../impl/cookie.js"></script>
<script src="../impl/ajax.js"></script>
<script src="../impl/anim.js"></script>
<script src="../impl/drag.js"></script>
<script src="../impl/lang.js"></script>
<script src="../dom/xpath.js"></script>
<script src="../dom/selector.js"></script>
<script src="../event/event.js"></script>


<div id="titulo">asynx Animator</div><br>
<div id="log">LOG<br></div><br>

<div id="anim1"><span>Anim1</span></div><br>

<select></select>

<br><br><br><br>
<button id="btn">animate</button>

<script>

asynx("anim1").css({
	bg: '#ccc',
	square: '100px',
	position: 'absolute'
});

//var anim = new asynx.anim('#anim1', { opacity:50 });


/*
 this.begin = 100;
this.finish = 220;
this.change = this.finish - this.begin;
this.duration = 30;
this.time = 0;
this.onEnterFrame = function () {
with (this) {
_x = Math.linearTween (time++, begin, change, duration);
}
};
 */

asynx("btn").click(function() {
	
	var b = 0;
	var f = 500;
	var c = f-b;
	var d = 20;
	var time = 0;
	
	
	
	var tw = new asynx.anim.tween("anim1", 0, 500, 40, asynx.anim.easing.bounce.Out);
	var tw2 = new asynx.anim.tween("anim1", 0, 500, 20, asynx.anim.easing.linear);
	
	
	//asynx.fixzIndex(asxyn('anim1'));
	
	tw.onTweenUpdate = function(el, pos) {
		el.css({ "left": pos });
	}
	
	tw.onTweenEnd = function(el, pos) {
		/*var twFade = new asynx.anim.tween("anim1", 100, 0, 20, asynx.anim.easing.strong.Out);
	
		twFade.onTweenUpdate = function(el, pos) {
			
			el.css({ "alpha": pos });
		}*/
	}
	
	 
	
	
	//asynx.timeline(c, d, function(a) {
	//}, "orri");
	
	
	/*var frame = setInterval(function() {
		
		var x = asynx.anim.easing.linear(time++, b, c, d);
		
		asynx("anim1").css({
			left: x
		});
		
		
		if (time > d) clearInterval(frame);
		
	}, d);
	*/
	
	
	
});

</script>